<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
		<title></title>
	</head>
	<style type="text/css">
		html,body{
				height: 100%;
				width: 100%;
				font-size: 16px;
				margin: 0;
				padding: 0;
		}
		#app{
				width: 100%;
		}
		.c-title{
			display: flex;
		}
		.c-title-sub{
			flex: 1;
			text-align: center;
			font-weight: bold;
			padding-left: 2%;
			padding-right: 2%;
		}
		.c-t{
			display: flex;
		}
		.c-d{
			flex: 1;
			text-align: center;
			padding-bottom: 12px;
			padding-left: 2%;
			padding-right: 2%;
		}
		.c-d::after{
			content: '';
			width: 80%;
			height: 1px;
			background-color: #ccc;
			    display: block;
			    margin: auto;
				margin-top: 12px;
		}
		.table{
			display: flex;
			height: 500px;
		}
		.table-sub{
			flex: 1;
			height: 100%;
			text-align: center;
		}
		.nowDate{
			border: 1px solid rgb(66, 143, 239);
			border-top: none;
		}
		.filtC{
			opacity: 0.3;
		}
		.nowDateB{
			border: 1px solid rgb(66, 143, 239);
			border-top: none;
			border-bottom: none;
		}
		.nowDateA{
			border: 1px solid rgb(66, 143, 239);
			border-bottom: none;
		}
	</style>
	<body>
		<div id="app">
			<div class="c-title">
				<div class="c-title-sub" :class='{nowDateA: index == isNow}' v-for="(item,index) in calendarTitle">
					{{item}}
				</div>
			</div>
			<div class='c-t'>
				<div class="c-d"  :class='{nowDateB: index == isNow}'  v-for="(item,index) in dateT">
					{{item}}
				</div>
			</div>
			<div class="table">
				<div class="table-sub" :class='{nowDate: index == isNow}'  v-for="(item,index) in tasksOption">
					<div :class="{filtC: ele.done}" v-for="ele in item">
						{{ele.title}}
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {
			calendarTitle: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
			options: [
				{
					date: '2021-05-10',
					tasks: [{
						title: '待办事项1',
						datetime: '2021-01-03 13:28:11',
						done: false
					}],
				},
				{
					date: '2021-05-11',
					tasks: []
				},
				{
					date: '2021-05-12',
					tasks: [{
						title: '待办事项2',
						datetime: '2021-01-05 01:14:12',
						done: false
					}],
				},
				{
					date: '2021-05-13',
					tasks: [
						{
							title: '待办事项4',
							datetime: '2021-01-06 10:48:33',
							done: false
						},
						{
							title: '待办事项5',
							datetime: '2021-01-06 11:00:27',
							done: false
						},
						{
								title: '待办事项3',
								datetime: '2021-01-06 09:50:47',
								done: true
							}
					],
				},
				{
					date: '2021-05-14',
					tasks: []
				},
				{
					date: '2021-05-15',
					tasks: [{
							title: '待办事项6',
							datetime: '2021-01-08 08:34:12',
							done: false
						},
						{
							title: '待办事项7',
							datetime: '2021-01-08 12:36:33',
							done: true
						},
					],
				},
				{
					date: '2021-05-16',
					tasks: [{
						title: '待办事项8',
						datetime: '2021-01-09 13:01:00',
						done: false
					}],
				},
			]
		},
		computed: {
			dateT() {
				let arr = this.options.map(el => {
					let temp = el.date.split('-')
					return `${temp[1]}/${temp[2]}`
				})
				return arr
			},
			tasksOption() {
				let arr = this.options.map(el => {
					return el.tasks
				})
				arr.forEach(el  => {
					el.forEach(ele => {
						ele.sort((a,b) => {
							console.log(a,b)
							// ele.datetime.getTime() - 
						})
					})
				})
				return arr
			},
			isNow(){
				let time = new Date()
				return time.getDay()
			}
		},
		methods:{
			
		}
	})
</script>


